<template>
  <div class="medicine-detail">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="药品名称">{{ detailData.medicineName }}</el-descriptions-item>
      <el-descriptions-item label="药品规格">{{ detailData.specification }}</el-descriptions-item>
      <el-descriptions-item label="剂型">{{ detailData.dosageForm }}</el-descriptions-item>
      <el-descriptions-item label="批准文号">{{ detailData.approvalNumber }}</el-descriptions-item>
      <el-descriptions-item label="生产厂家">{{ detailData.manufacturer }}</el-descriptions-item>
      <el-descriptions-item label="保质期">{{ detailData.shelfLife }}个月</el-descriptions-item>
      <el-descriptions-item label="储存条件">{{ detailData.storageCondition || '-' }}</el-descriptions-item>
      <el-descriptions-item label="通用分类">{{ detailData.commonCategoryName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="处方类型">{{ detailData.prescriptionCategoryName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="库存数量">{{ detailData.salesVolume || 0 }}</el-descriptions-item>
      <el-descriptions-item label="单价">¥{{ detailData.price || 0 }}</el-descriptions-item>
    </el-descriptions>

    <el-divider content-position="left">详细信息</el-divider>

    <el-descriptions :column="1" border>
      <el-descriptions-item label="药品成分">
        <div class="detail-text">{{ detailData.ingredients || '暂无数据' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="适应症">
        <div class="detail-text">{{ detailData.indications || '暂无数据' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="禁忌症">
        <div class="detail-text">{{ detailData.contraindications || '暂无数据' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="用法用量">
        <div class="detail-text">{{ detailData.usageMethod || '暂无数据' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="注意事项">
        <div class="detail-text">{{ detailData.precautionNotes || '暂无数据' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="不良反应">
        <div class="detail-text">{{ detailData.sideEffectDescriptions || '暂无数据' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="药物相互作用">
        <div class="detail-text">{{ detailData.drugInteractionDetails || '暂无数据' }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
defineProps({
  detailData: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped>
.medicine-detail {
  padding: 20px;
}

.detail-text {
  white-space: pre-wrap;
  line-height: 1.5;
  color: #606266;
}

:deep(.el-descriptions__cell) {
  padding: 12px 16px;
}

.el-divider {
  margin: 24px 0;
}
</style>
